<template>
  <div class="login_wrap">
      <div class="form_wrap">
        <h2 class="title">Register</h2>
          <el-form
              ref="formRef"
              :model="registerData"
              label-width="100px"
              class="demo-dynamic"
          >
              <el-form-item
                  prop="username"
                  label="用户名"
                  :rules="[
                      {
                      required: true,
                      message: '此项为必填项',
                      trigger: 'blur',
                      }, 
                  ]"
              >
                  <el-input v-model="registerData.username" />
              </el-form-item>
              
              <el-form-item
                  prop="password"
                  label="密码"
                  :rules="[
                  {
                  required: true,
                  message: '此项为必填项',
                  trigger: 'blur',
                  }, 
              ]"
              >
                  <el-input type="password" v-model="registerData.password"/>
              </el-form-item>

              <el-form-item
                  prop="affirm_password"
                  label="确认密码"
                  :rules="[
                  {
                  required: true,
                  message: '此项为必填项',
                  trigger: 'blur',
                  }, 
              ]"
              >
                  <el-input type="password" v-model="affirm_password" />
              </el-form-item>
              <div class="register-div">
                <a href="#" class="register">Help?</a>
              </div>
          </el-form>
          <div class="login-button">
            <el-button type="danger" class="login_btn" @click="register">Register</el-button>
            <el-button  type="success" class="login_btn"><a href="/login">Login</a></el-button>
          </div>
      </div>
  </div>
</template>


<script lang="ts">
import { useRouter } from 'vue-router'
import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Register } from '@/api/api';

  export default{
    name: 'Register',

    setup(){
      // 实例化路由对象
      const routers = useRouter()
      const data = reactive({
        registerData:{
          username: '',
          password: '',
        },
      userinfo: ref([]),
      loading: ref(),
      affirm_password: null

      })

      const register = async () => {
        if (data.registerData.username && data.registerData.password === data.affirm_password ) {
          data.loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })

          Register(
            data.registerData,

          ).then((res?: any) => {
            data.userinfo = res._rawValue
            console.log(data.userinfo);
            if (res._rawValue.userinfo){
              data.loading.close()
              ElMessage({
                message: '注册成功',
                type: 'success',
                duration: 1000,
                center: true,
              })
              routers.push({
                path: '/login'
              })
              return
            }
          })
          .catch(error => {
            data.loading.close()
            console.log('error:', error);
          })
          return
        }
        ElMessage({
          message: '密码不一致,重新输入！',
          type: 'error',
          duration: 2000,
          center: true,
        })
        return
      }


      return{
        ...toRefs(data),
        register

      }
    }
  }


</script>



<style scoped>

.login_wrap{
      width: 100%;
      height: 100%;
      position: relative;
  }
  .form_wrap{
      position: fixed;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: #ffffff;
      padding:30px 50px;
      border-radius: 5px;
      box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
  }
  .login_btn{
      display: block;
      margin: 10px auto;
      width: auto;
  }

  .login-button {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    margin-left: 100px;
    
  }

  .login_btn a {
    text-decoration: none;
    color: rgb(255, 255, 255);
  }

.title {
  margin-right: 100px;
  margin-bottom: 50px;
  font-weight: bold;
  font-size: 22px;
}

.register-div{
  height: 10px;
  width: 100%;
  margin-bottom: 10px;
}

.register {
  font-size: 10px;
  color: black;
  position: absolute;
  right: 60px;
  bottom: 100px;
  margin-left: 200px;

}


</style>